<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <span class="s1">{{ $t('basics.proName') }}</span>
                        <a-input
                            style="flex: 1"
                            v-model="state.project_name"
                            :placeholder="$t('basics.enterProName')"
                        />
                    </div>
                    <div>
                        <a-button class="mr20" type="primary" @click="search">
                            <icon-search class="mr6" />
                            {{ $t('basics.search') }}
                        </a-button>
                        <a-button type="secondary" @click="reset">
                            <icon-refresh class="mr6" />
                            {{ $t('basics.reset') }}
                        </a-button>
                    </div>
                    <div style="position: absolute; right: 10px">
                        <a-button
                            type="primary"
                            class="ml-3 fr"
                            @click="importAcc"
                        >
                            {{ $t('basics.daochuquanbuyouhuifuduihua') }}
                        </a-button>
                    </div>
                </div>
            </div>
            <div class="container-content mt20">
                <div class="container-content-table">
                    <a-table
                        :columns="state.columns"
                        :data="state.tableData"
                        :loading="state.loading"
                        :pagination="false"
                    >
                        <template #is_select="{ record }">
                            <div
                                v-if="record.is_select == 1"
                                style="color: red"
                            >
                                是
                            </div>
                            <div v-else>否</div>
                        </template>
                        <template #project_type="{ record }">
                            <div>
                                {{ record.project_type == 1 ? '单向' : '双向' }}
                            </div>
                        </template>
                        <template #operate="{ record }">
                            <div class="flex">
                                <a-button
                                    size="mini"
                                    type="primary"
                                    class="mb-1 mt-1 mr-2"
                                    @click="edit(record)"
                                >
                                    {{ $t('basics.editTxt') }}
                                </a-button>
                                <a-button
                                    v-if="record.is_select != 1"
                                    size="mini"
                                    type="primary"
                                    status="danger"
                                    class="mb-1 mt-1 mr-2"
                                    @click="delPoj(record.id)"
                                >
                                    删除
                                </a-button>
                            </div>
                            <a-button
                                v-if="record.is_select != 1"
                                size="mini"
                                type="primary"
                                @click="setpoj(record.id)"
                            >
                                设置当前项目
                            </a-button>
                        </template>
                    </a-table>
                    <div
                        class="_crud-footer mt-3 text-right"
                        ref="crudFooterRef"
                    >
                        <a-pagination
                            :total="state.total"
                            show-total
                            show-jumper
                            show-page-size
                            @page-size-change="getTableData"
                            @change="getTableData"
                            v-model:current="state.page"
                            v-model:page-size="state.pageSize"
                            style="display: inline-flex"
                        />
                    </div>
                </div>
            </div>
            <a-modal
                v-model:visible="form.visible"
                :render-to-body="false"
                :footer="false"
            >
                <template #title> {{ $t('basics.editTxt') }} </template>
                <a-form
                    :content-flex="false"
                    :model="form.formParams"
                    ref="formRef"
                    :rules="form.rules"
                >
                    <a-form-item
                        field="project_name"
                        label-col-flex="150px"
                        :label="$t('basics.proName')"
                        validate-trigger="blur"
                    >
                        <a-input
                            disabled
                            style="width: 100%; margin-right: 20px"
                            v-model="form.formParams.project_name"
                            :placeholder="$t('basics.enterProName')"
                        />
                    </a-form-item>
                    <a-form-item
                        disabled
                        field="project_key"
                        label-col-flex="150px"
                        :label="$t('basics.projectKey')"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="form.formParams.project_key"
                            :placeholder="$t('basics.enterProjectKey')"
                        />
                    </a-form-item>
                    <a-form-item
                        field="phoneinfo_type"
                        label-col-flex="150px"
                        :label="$t('basics.accountType')"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="form.formParams.phoneinfo_type"
                            placeholder="tn或tf"
                        />
                    </a-form-item>
                    <a-form-item
                        field="send_interval_time"
                        label-col-flex="150px"
                        label="账号最小发送间隔(秒)"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="form.formParams.send_interval_time"
                            placeholder="账号最小发送间隔(秒)"
                        />
                    </a-form-item>
                    <a-form-item
                        field="max_send_interval_time"
                        label-col-flex="150px"
                        label="账号最大发送间隔(秒)"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="form.formParams.max_send_interval_time"
                            placeholder="账号最大发送间隔(秒)"
                        />
                    </a-form-item>
                    <a-form-item
                        field="max_send_count"
                        label-col-flex="150px"
                        :label="$t('basics.accountNum')"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="form.formParams.max_send_count"
                            :placeholder="$t('basics.enterAccountNum')"
                        />
                    </a-form-item>
                    <a-form-item
                        field="max_send_count"
                        label-col-flex="150px"
                        :label="$t('basics.projectTypeTxt')"
                        validate-trigger="blur"
                    >
                        <a-radio-group
                            v-model="form.formParams.project_type"
                            class="item-type"
                            :options="types"
                        />
                    </a-form-item>
                </a-form>
                <div class="dialog-foot">
                    <a-button
                        style="color: #000"
                        class="mr20"
                        @click="cancel"
                        >{{ $t('basics.concel') }}</a-button
                    >
                    <a-button class="mr20" type="primary" @click="confirm">{{
                        $t('basics.sure')
                    }}</a-button>
                </div>
            </a-modal>
            <a-modal
                class="my_model"
                v-model:visible="delVisible"
                :render-to-body="false"
                @ok="delOk"
                @cancel="delVisible = false"
                draggable
            >
                <template #title> 确认删除此项目 </template>
            </a-modal>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { Message } from '@arco-design/web-vue';
import commonApi from '@/api/common';
import tool from '@/utils/tool';
import { $request, request } from '@/utils/request.js';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const { proxy } = getCurrentInstance();
const delVisible = ref(false);
const activeId = ref(null);
const types = ref([
    { label: t('basics.oneWay'), value: 1 },
    { label: t('basics.twoWay'), value: 2 }
]);
const state = reactive({
    columns: [
        {
            title: t('basics.proName'),
            dataIndex: 'project_name'
        },
        {
            title: t('basics.accountType'),
            dataIndex: 'phoneinfo_type'
        },
        {
            title: t('basics.proCurrent'),
            dataIndex: 'is_select',
            slotName: 'is_select'
        },
        {
            title: t('basics.proType'),
            dataIndex: 'project_type',
            slotName: 'project_type'
        },
        {
            title: t('basics.projectKey'),
            dataIndex: 'project_key'
        },
        {
            title: '账号最小发送间隔(秒)',
            dataIndex: 'send_interval_time'
        },
        {
            title: '账号最大发送间隔(秒)',
            dataIndex: 'max_send_interval_time'
        },
        {
            title: t('basics.accountNum'),
            dataIndex: 'max_send_count'
        },
        {
            title: t('basics.controls'),
            dataIndex: 'operate',
            width: 180,
            slotName: 'operate'
        }
    ],
    project_name: null,
    page: 1,
    pageSize: 10,
    total: 0,
    tableData: [],
    loading: false
});

const form = reactive({
    visible: false,
    formParams: {
        project_name: null,
        project_key: null,
        max_send_count: null
    },
    rules: {
        project_name: [
            {
                required: true,
                message: t('basics.enterProName')
            }
        ],
        project_key: [
            {
                required: true,
                message: t('basics.enterProjectKey')
            }
        ],
        max_send_count: [
            {
                required: true,
                message: t('basics.enterAccountNum')
            }
        ],
        phoneinfo_type: [
            {
                required: true,
                message: '请输入tn或tf'
            }
        ],
        send_interval_time: [
            {
                required: true,
                message: '请输入账号发送间隔秒数'
            }
        ]
    }
});

const edit = (params) => {
    console.log(params);
    form.formParams = { ...params };
    form.visible = true;
};
/**删除 */
const delPoj = (id) => {
    delVisible.value = true;
    activeId.value = id;
};
/**删除弹窗确认 */
const delOk = () => {
    $request
        .post('/cloud/project/deleteProject', { id: activeId.value })
        .then((res) => {
            proxy.$message.success('删除成功');
            getTableData();
            activeId.value = null;
            delVisible.value = false;
        });
};

const search = () => {
    state.page = 1;
    getTableData();
};

const reset = () => {
    state.project_name = null;
    state.page = 1;
    state.pageSize = 10;
    getTableData();
};

const getTableData = () => {
    state.loading = true;
    let params = {
        page: state.page,
        pageSize: state.pageSize,
        project_name: state.project_name
    };
    $request.get('/cloud/project/index', params).then(({ items, pageInfo }) => {
        state.tableData = items;
        state.total = pageInfo.total;
        state.loading = false;
    });
};

const confirm = () => {
    let params = {
        ...form.formParams
        // send_interval_time: Number(form.formParams.send_interval_time),
        // max_send_interval_time: form.formParams.max_send_interval_time
    };
    proxy.$refs['formRef'].validate((valid) => {
        if (!valid) {
            $request.post('/cloud/project/save', params).then((res) => {
                form.visible = false;
                proxy.$message.success('修改成功');
                getTableData();
            });
        }
    });
};

const loadings = ref(false);
/**导出有回复对话*/
const importAcc = () => {
    loadings.value = true;
    Message.info(t('basics.qingqiuxiazai'));

    const url = 'client/userTaskDetail/exportAllReply';
    if (/^(http|https)/g.test(url)) {
        window.open(url);
    } else {
        //visible.value = false;
        commonApi.download(url, 'get', {}).then((res) => {
            if (res && !res.message) {
                loadings.value = false;
                tool.download(res);
                Message.success(t('basics.qingqiuchenggong'));
            } else {
                proxy.$message.error(t('basics.meiyoukedaochudeshuju')); //t("basics.shujubucunzai")
            }
        });
    }
};
/**设置为当前项目 */
const setpoj = (id) => {
    $request.post('/cloud/project/setSelectProject', { id }).then((res) => {
        getTableData();
        Message.success('设置成功');
    });
};

const cancel = () => {
    form.visible = false;
};

getTableData();
</script>
<script>
export default { name: 'cloud:project' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
::v-deep .my_model .arco-modal-body {
    padding: 0;
}
::v-deep .my_model .arco-modal-header,
::v-deep .my_model .arco-modal-footer {
    border: 0px;
}
</style>
